<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Time Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Time</h1>
        </gs-jumbo><gs-jumbo bg-danger>
            <h2 class="text-center">WARNING: This element is deprecated, please use the <a href="doc-elem-datetime.html"><code>&lt;gs-datetime&gt;&lt;/gs-datetime&gt;</code></a> instead</h2>
        </gs-jumbo>
            
        <gs-container min-width="sml;med;lrg">
                <h3 class="doc-header">Tag:</h3>
                <div class="doc-section doc-mono">
                    <code>&lt;gs-time&gt;&lt;/gs-time&gt;</code>
                </div>
                
                <h3>Description:</h3>
                    <p>The gs-time control is like the gs-text control, but it is specialized for times.</p>
                
                <h1>Examples:</h1>
                <div class="doc-section">
                    <div class="doc-example-description">
                        <span class="h3">Skeleton Example:</span>
                        <p>A basic gs-time element. Without attributes the gs-time control will have the following features/behaviors:</p>
                        <ol>
                            <li><p>) There is a button that activates the time picker.</p></li>
                            <li><p>) If the time picker is in modal mode: the time picker can be dismissed by clicking the "Done" button. If the time picker is not in modal mode: clicking out of the time control will dissmiss the time picker.</p></li>
                            <li><p>) You can also change the time manually.</p></li>
                        </ol>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="28">
                            <label for="time_example">Time Example:</label>
                            <gs-time id="time_example"></gs-time>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[column=""]</code>:</span>
                        <p>When you have a <code>gs-time</code> inside a data element and you want to use it to display cell data you use the <code>column</code> attribute.</p>
                    </div>
                    <gs-doc-example>
                    <template for="html" height="10">
                        <gs-form src="gsdoc.tpeople" where="id=2341">
                            <template>
                                <b>Birth Time:</b>
                                <gs-time column="birth_time" disabled></gs-time>
                            </template>
                        </gs-form>
                    </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[value=""]</code>:</span>
                        <p>To set the value for the gs-time, use the "value" attribute.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="15">
                            <label for="control_default">Time With No Value:</label>
                            <gs-time id="control_default"></gs-time>
                            <label for="control_value">Time With Value:</label>
                            <gs-time id="control_value" value="15:30"></gs-time>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[qs=""]</code>:</span><br />
                        <p>The name <code>[qs]</code> stands for "querystring". The querystring is the part in the URL after the "?". The <code>[qs]</code> attribute has two formats, each with their own use.</p>
                        
                        <ul>
                            <li>qs="<i>key1</i>=<i>attribute1</i>". This format allows you to fill any attribute with any key from the querystring. To use multiple keys from the querystring you can put a comma-separated list of these expressions (for example: qs="<i>key1</i>=<i>attribute1</i>,<i>key2</i>=<i>attribute2</i>"). If you need an attribute to be added when a querystring key is not present, replace the "=" with "!=" (for example: qs="<i>key1</i>!=<i>attribute1</i>", attribute1 will only be added if key1 is not in the querystring). As a shorthand, if the key in the querystring is the same name as the attribute you want to fill, you can omit the attribute name in the expression (for example: qs="<i>key1</i>="). If an expression doesn't find it's key in the querystring: it reverts the attribute that it fills to it's original value.</li>
                            <li>qs="<i>key</i>". This format will update the <code>[value]</code> attribute with the querystring whenever the querystring changes.</li>
                        </ul>
                    </div>
                    <gs-doc-example query-string="test1=1:30PM&test2=1:30PM">
                        <template for="html" height="35">
                            <gs-time qs="test1" placeholder="test1"></gs-time>
                            <gs-time qs="test2=value" placeholder="test2"></gs-time>
                            <gs-time qs="test3=hidden" placeholder="test3"></gs-time>
                            <gs-time qs="test4!=hidden" placeholder="test4"></gs-time>
                            <br />
                            <br />
                            <gs-grid widths="1,1">
                                <gs-block>
                                    <gs-button onclick="GS.pushQueryString('test1=1:50PM');">Add "test1"</gs-button>
                                </gs-block>
                                <gs-block>
                                    <gs-button onclick="GS.removeFromQueryString('test1');">Remove "test1"</gs-button>
                                </gs-block>
                                <gs-block>
                                    <gs-button onclick="GS.pushQueryString('test2=1:50PM');">Add "test2"</gs-button>
                                </gs-block>
                                <gs-block>
                                    <gs-button onclick="GS.removeFromQueryString('test2');">Remove "test2"</gs-button>
                                </gs-block>
                                <gs-block>
                                    <gs-button onclick="GS.pushQueryString('test3=yes');">Add "test3"</gs-button>
                                </gs-block>
                                <gs-block>
                                    <gs-button onclick="GS.removeFromQueryString('test3');">Remove "test3"</gs-button>
                                </gs-block>
                                <gs-block>
                                    <gs-button onclick="GS.pushQueryString('test4=yes');">Add "test4"</gs-button>
                                </gs-block>
                                <gs-block>
                                    <gs-button onclick="GS.removeFromQueryString('test4');">Remove "test4"</gs-button>
                                </gs-block>
                            </gs-grid>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[Placeholder=""]</code>:</span>
                        <p>The "placeholder" attribute specifies some placeholder text for when the control is empty.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="28">
                            <gs-time placeholder="Placeholder for when this control is empty"></gs-time>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[mini]</code>:</span>
                        <p>Sometimes you are limited on space. The mini attribute is used to make the gs-time smaller.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="28">
                            <label for="documentation-mini">Mini:</label>
                            <gs-time id="documentation-mini" mini></gs-time>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[no-picker]</code>:</span>
                        <p>If you want to remove the date picker button: add the "no-picker" attribute.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html">
                            <label for="documentation-no-picker">No Picker:</label>
                            <gs-time id="documentation-no-picker" no-picker></gs-time>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[no-now-button]</code>:</span>
                        <p>If you want to remove the "Now" button from the picker: add the "no-now-button" attribute.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="28">
                            <label for="documentation-no-now-button">No Now Button:</label>
                            <gs-time id="documentation-no-now-button" no-now-button></gs-time>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[non-empty]</code>:</span>
                        <p>If you want to force the user to input a value: add the non-empty attribute. Note: if a default value is not provided then the control defaults to "12:00 PM".</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="28">
                            <label for="documentation-non-empty">Non Empty:</label>
                            <gs-time id="documentation-non-empty" non-empty></gs-time>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[format=""]</code>:</span>
                        <p>The "format" attribute determines the display format of the control. This attribute can take two different values: "regular" and "military". "regular" is normal 12-hour time and "military" is 24-hour time.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="28">
                            <label for="documentation-regular">Format: "regular" (Default)</label>
                            <gs-time id="documentation-regular" format="regular" value="1:30 PM"></gs-time>
                            <label for="documentation-military">Format: "military"</label>
                            <gs-time id="documentation-military" format="military" value="1:30 PM"></gs-time>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[output-format=""]</code>:</span>
                        <p>The "output-format" attribute determines the internal format of the control. This attribute can take two different values: "regular" and "military". "regular" is normal 12-hour time and "military" is 24-hour time. When getting the value of the control in javascript "output-format" is the format it will get.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="28">
                            <label for="documentation-regular">Format: "regular" (Default)</label>
                            <gs-time id="documentation-regular" output-format="regular" value="1:30 PM"></gs-time>
                            <label for="documentation-military">Format: "military"</label>
                            <gs-time id="documentation-military" output-format="military" value="1:30 PM"></gs-time>
                            <gs-button onclick="showControlValues()">Show Internal Values</gs-button>
                        </template>
                        <template for="js" height="auto">
                            function showControlValues() {
                                alert('Control 1: "' + document.getElementById('documentation-regular').value + '"\n' +
                                      'Control 2: "' + document.getElementById('documentation-military').value + '"');
                            }
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[tabindex=""]</code>:</span>
                        <p>With the "tabindex" attribute, you can control what order your controls are tabbed to.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="28">
                            <label for="documentation-tabindex-1">1:</label>
                            <gs-time id="documentation-tabindex-1" tabindex="1"></gs-time>
                            <label for="documentation-tabindex-3">3:</label>
                            <gs-time id="documentation-tabindex-3" tabindex="3"></gs-time>
                            <label for="documentation-tabindex-2">2:</label>
                            <gs-time id="documentation-tabindex-2" tabindex="2"></gs-time>
                            <label for="documentation-tabindex-4">4:</label>
                            <gs-time id="documentation-tabindex-4" tabindex="4"></gs-time>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[readonly]</code>:</span><br />
                        <p>The <code>[readonly]</code> attribute is similar to <code>[disabled]</code> because it prevents the value from changing. The differences are that readonly is styled differently and allows you to copy the current text from the control.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="15">
                            <gs-time readonly value="1:30 PM"></gs-time>
                        </template>
                    </gs-doc-example>
                
                    <div class="doc-example-description">
                        <span class="h3">Javascript Methods:</span>
                        <p>These functions can be run on individual <code>&lt;gs-time&gt;</code> elements:<br />
                        <i>TIME</i>.open() &lt;-- This method opens the <code>&lt;gs-time&gt;</code>.<br />
                    </div>
                    <gs-doc-example>
                        <template for="html" height="10">
                            <gs-button onclick="testOpen()">Open Interval</gs-button>
                            <br />
                            <gs-time id="test-elem"></gs-time>
                        </template>
                        <template for="js" height="10">
                            function testOpen() {
                                document.getElementById('test-elem').open();
                            }
                        </template>
                    </gs-doc-example>
                    
                    
                </div>
        </gs-container>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </body>
</html>
